<template>
	<view class="warp">
		<img class="warp-bg" src="../../static/images/login/app-login-bg.png">
		<view class="warp-form">
			<view class="warp-form-title-box">
				<view class="warp-form-title">用户登录</view>
			</view>
			<view class="warp-form-input-box">
				<view class="warp-form-input-item">
					<u-icon class="warp-form-input-item-icon" name="account" color="#929292" size="44"></u-icon>
					<input class="warp-form-input-item-int" v-model="account" type="text" placeholder="密码账号随便填">
				</view>
				<view class="warp-form-input-item">
					<u-icon class="warp-form-input-item-icon" name="lock" color="#929292" size="44"></u-icon>
					<input class="warp-form-input-item-int" v-model="password" type="password" placeholder="请输入您的密码">
				</view>
			</view>
			<view class="warp-form-btn-box">
				<u-button class="warp-form-btn" :loading="btnLoading" @click="handleLogin">立即登录</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				account: '', //登录账号
				password: '', //登录密码
				btnLoading: false, //登录按钮loading
			}
		},
		methods:{
			//登录
			handleLogin: function(e) {
				if(!this.account || !this.password) {
					this.$mff.toast('请输入账号密码')
					return false;
				};
				this.btnLoading = true
				setTimeout(() => {
					this.btnLoading = false
					this.$mff.goPage('/home/index/index')
				}, 1000)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "./index.scss";
</style>
